<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
     <style>
	  #gallery { float: left; width: 65%; min-height: 12em; }
	  .gallery.custom-state-active { background: #eee; }
	  .gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
	  .gallery li h5 { margin: 0 0 0.4em; cursor: move; }
	  .gallery li a { float: right; }
	  .gallery li a.ui-icon-zoomin { float: left; }
	  .gallery li img { width: 100%; cursor: move; }
	 
	  #trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
	  #trash h4 { line-height: 16px; margin: 0 0 0.4em; }
	  #trash h4 .ui-icon { float: left; }
	  #trash .gallery h5 { display: none; }
  	</style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script>
    
    $(document).ready(function() {
   
	  $(function() {
	    // there's the gallery and the trash
	    var $gallery = $( "#gallery" ),
	      $trash = $( "#trash" );
	 
	    // let the gallery items be draggable
	    $( "li", $gallery ).draggable({
	      cancel: "a.ui-icon", // clicking an icon won't initiate dragging
	      revert: "invalid", // when not dropped, the item will revert back to its initial position
	      containment: "document",
	      helper: "clone",
	      cursor: "move"
	    });
	 
	    // let the trash be droppable, accepting the gallery items
	    $trash.droppable({
	      accept: "#gallery > li",
	      activeClass: "ui-state-highlight",
	      drop: function( event, ui ) {
	        deleteImage( ui.draggable );
	      }
	    });
	 
	    // let the gallery be droppable as well, accepting items from the trash
	    $gallery.droppable({
	      accept: "#trash li",
	      activeClass: "custom-state-active",
	      drop: function( event, ui ) {
	        recycleImage( ui.draggable );
	      }
	    });
	 
	    // image deletion function
	    var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
	    function deleteImage( $item ) {
	      $item.fadeOut(function() {
	        var $list = $( "ul", $trash ).length ?
	          $( "ul", $trash ) :
	          $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
	 
	        $item.find( "a.ui-icon-trash" ).remove();
	        $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
	          $item
	            .animate({ width: "48px" })
	            .find( "img" )
	              .animate({ height: "36px" });
	        });
	      });
	    }
	 
	    // image recycle function
	    var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
	    function recycleImage( $item ) {
	      $item.fadeOut(function() {
	        $item
	          .find( "a.ui-icon-refresh" )
	            .remove()
	          .end()
	          .css( "width", "96px")
	          .append( trash_icon )
	          .find( "img" )
	            .css( "height", "72px" )
	          .end()
	          .appendTo( $gallery )
	          .fadeIn();
	      });
	    }
	 
	    // image preview function, demonstrating the ui.dialog used as a modal window
	    function viewLargerImage( $link ) {
	      var src = $link.attr( "href" ),
	        title = $link.siblings( "img" ).attr( "alt" ),
	        $modal = $( "img[src$='" + src + "']" );
	 
	      if ( $modal.length ) {
	        $modal.dialog( "open" );
	      } else {
	        var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
	          .attr( "src", src ).appendTo( "body" );
	        setTimeout(function() {
	          img.dialog({
	            title: title,
	            width: 400,
	            modal: true
	          });
	        }, 1 );
	      }
	    }
	 
	    // resolve the icons behavior with event delegation
	    $( "ul.gallery > li" ).click(function( event ) {
	      var $item = $( this ),
	        $target = $( event.target );
	 
	      if ( $target.is( "a.ui-icon-trash" ) ) {
	        deleteImage( $item );
	      } else if ( $target.is( "a.ui-icon-zoomin" ) ) {
	        viewLargerImage( $target );
	      } else if ( $target.is( "a.ui-icon-refresh" ) ) {
	        recycleImage( $item );
	      }
	 
	      return false;
	    });
	  });
    });
  </script>
  </head>

	<body>
		<div class="ui-widget ui-helper-clearfix">
			<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
	      		<#list miembros as miembro>
				  <li class="ui-widget-content ui-corner-tr">
				    <h5 class="ui-widget-header">${miembro.nombres}, ${miembro.apellido}</h5>
				    <img src="images/${miembro.imagen}" alt="The peaks of High Tatras" width="96" height="72">
				    <a href="images/${miembro.imagen}" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
				    <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
				  </li>
	    		</#list>
			</ul>
			<div id="trash" class="ui-widget-content ui-state-default">
			  <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
			</div>
		</div>
	</body>
</html>